<template>
  <view class="bar-outbox">
	<uni-transition
	  ref="barani"
	  :duration="1000"
	  mode-class="fade"
	  :styles="styles"
	  :show="topBarShow"
	>
		<view class="title-box trans" :style="{'padding-top':currentEnv=='h5OrApp'?'19rpx':`${menuTopToBar}px`,'padding-bottom':currentEnv=='h5OrApp'?'19rpx':`${menuTopToBar}px`}">	 
			 <view class="title" :style="{'width':`calc(100% - ${leftToRightBian}px)`,height:currentEnv=='h5OrApp'?'30px':`${capsuleHeight}px`}">
				 <slot name="default"></slot>
			 </view>
		</view>	
	</uni-transition>
  </view>
</template>
<script setup>
	//import {defineProps} from "vue";
	import {storeToRefs} from 'pinia';
	import {useSystemStore} from "@/stores/system.js";
	const systemStore=useSystemStore();
	 
	const props=defineProps({
		topBarShow: {
			type: Boolean,
			default: false
		},
	})
	const {statusBarHeight,leftToRightBian,menuTopToBar,capsuleBottom,capsuleHeight,capsuleWidth,currentEnv}=storeToRefs(systemStore);
	if(!capsuleWidth.value){
		systemStore.getSystemInfo()
	}
	const styles= {
		'paddingTop': `${statusBarHeight.value}px`,
		'paddingRight': `${leftToRightBian.value}px`,
		'position':'fixed',
		top: 0,
		left: 0,
		zIndex:120,
		width: '100%',
		boxSizing: 'border-box',
		background:'#fff',
		borderBottom:'2rpx solid transparent'
	};
</script>
 

<style lang="scss" scoped>
	.content{
		display:flex;
		justify-content: flex-end;
		padding-right:57.69rpx;
		box-sizing: border-box;
		.add-box{
			background: rgba(255,255,255,0.6);
			border-radius: 48rpx;
			border: 1rpx solid rgba(151,151,151,0.2);
			padding:11.5rpx;
			.add-icon{
				width:38.5rpx;
				height:38.5rpx;
				display:block;
			}
		}
	}
	.custom-navbarbox-bottom {
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 99;
	  width: 100%;
	  box-sizing: border-box;
	  border-bottom:0;
	  background:transparent;
	}
	.title-box{
			  display: flex;
			  align-items: center;
			  border-bottom:0;
			  // justify-content: flex-end;
			  padding-left:23rpx;
			  &.trans{
				  .back-box{
					  background: rgba(255,255,255,0.6);
					  border: 2rpx solid rgba(151,151,151,0.2);
				  }
				   
			  }
			  .back-box{
				  display:flex;
				  justify-content: center;
				  align-items: center;
				  // background: rgba(255,255,255,0.6);
				  background: rgba(255,255,255,0.85);
				  // background: rgba(216,216,216,0);
				  border-radius: 48rpx;
				  border: 2rpx solid #fff;
				  margin-right:12rpx;
				  backdrop-filter: blur(4px);
				  .left{
					  flex:1;
					  display:flex;
					  justify-content: center;
					  align-items: center;
					  height: 100%;
					 // border-right:2rpx solid rgba(0,0,0,0.2);
					  .back{
					  					  width:46rpx;
					  					  height:46rpx;
					  					  // margin-right:17rpx;
					  }
					   
				  }
				  .line{
				  					  width: 2rpx;
				  					  height: 35rpx;
				  					  display:inline-block;
				  					  background: rgba(0,0,0,0.2);
				  					  // margin-right:15rpx;
				  }
				  .right{
					  flex:1;
					  display: flex;
					      justify-content: center;
					      align-items: center;
						  height: 100%;
					  .home{
					  					width:46rpx;
					  					height:46rpx;  
					  }
				  }
				 
				   
				  
			  }
			  .title{
				  flex:auto;
				  // // height:100%;
				  // display:flex;
				  // align-items: center;
				  // justify-content: center;
				  text-align:center;
				  font-size: 35rpx;
				  font-family: PingFangSC-Semibold, PingFang SC;
				  font-weight: 600;
				  color: #000000;
				  white-space: nowrap;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  //max-width:100%;
				 
				   
				  .text{
					   
				  }
			  }
	}
	.search-box {
	  flex: auto;
	  padding-left: 38rpx;
	}
</style>
